<html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/jquery-ui.css">
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/jquery-ui-1.10.4.min.js"></script>
    <script src="js/html2canvas.js"></script>
    <title>二维物理主机自定义部署绘制工具</title>
</head>
<style>
* {
    padding: 0;
    margin: 0;
}
ul, li {
    list-style-type: none;
}
.sortable {
    width: 24%;
    height: 90%;
    font-size: 12px;
}
.guige_list {
    display: block;
    float: left;
    _width: 30%;
    width: 100px;
    height: 80px;
    margin: 5px;
    line-height: 40px;
    box-sizing: border-box;
    padding: 0 10px;
    border-radius: 3px;
    border: 1px solid #e6e6e6;
    background-color: #fff;
    box-shadow: 1px 1px 14px 0px rgba(0,0,0,0.1);
}

.guige_list i{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.guige_list:hover {;
    border: 1px solid #3666C8;
    background-color: #fff;
    box-shadow: 1px 1px 14px 0px rgba(0,0,0,0.1);
}

._right {
    width: 100%;
    height: 100%;
}
._left {
    width: -webkit-fill-available;
    height: 100%;
    position: absolute;
}

.divCopy {
        width: 230px;
        height: 250px;
        background: #fcfcfc;
        position: absolute;
        left: 0;
        top: 0;
        cursor: move;
        z-index: 5;
        border: 2px dashed green;
    }
    
    .box {
        width: 70%;
        height: 100%;
        position: relative;
        top: 10px;
        right: 10px;
        _border: 2px dashed #ccc;
        font-size: 12px;
    }
    .divCopyStyle{
        float: left;
        margin-top: 2px;
        margin-left: 2px;
    }
    /* 左130，上80整倍 */
    .ser1{
        background: url("serverPic1.png") no-repeat 0px 0px;/* 距div的左边界和距div的上边界 */
    }

    .ser2{
        background: url("serverPic1.png") no-repeat -130px 0px;/* 距div的左边界和距div的上边界 */
    }
    .ser3{
        background: url("serverPic1.png") no-repeat 0px -80px;/* 距div的左边界和距div的上边界 */
    }
    .ser4{
        background: url("serverPic1.png") no-repeat -130px -80px;/* 距div的左边界和距div的上边界 */
    }
    .ser5{
        background: url("serverPic1.png") no-repeat 0px -160px;/* 距div的左边界和距div的上边界 */
    }
    .ser6{
        background: url("serverPic1.png") no-repeat -130px -160px;/* 距div的左边界和距div的上边界 */
    }
    .ser7{
        background: url("serverPic1.png") no-repeat 0px -240px;/* 距div的左边界和距div的上边界 */
    }
    .ser8{
        background: url("serverPic1.png") no-repeat -130px -240px;/* 距div的左边界和距div的上边界 */
    }
    .ser9{
        background: url("serverPic1.png") no-repeat 0px -320px;/* 距div的左边界和距div的上边界 */
    }

    .ser10{
        background: url("serverPic1.png") no-repeat -130px -320px;/* 距div的左边界和距div的上边界 */
    }
    .ser11{
        background: url("serverPic1.png") no-repeat 0px -390px;/* 距div的左边界和距div的上边界 */
    }
    .ser12{
        background: url("serverPic1.png") no-repeat -130px -400px;/* 距div的左边界和距div的上边界 */
    }
    .ser13{
        background: url("serverPic1.png") no-repeat 0px -470px;/* 距div的左边界和距div的上边界 */
    }
    .ser14{
        background: url("serverPic1.png") no-repeat -130px -480px;/* 距div的左边界和距div的上边界 */
    }
    .ser15{
        background: url("serverPic1.png") no-repeat 0px -560px;/* 距div的左边界和距div的上边界 */
    }

</style>
<body>
    <div class="_left">
        <div style="margin-top: 300px;">
            <div><button id="downButton">导出图片[底部右键图片另存为]</button></div>
            <span>主机组件列表[注:先拖拽主机区域，再拖拽组件到对应主机区域上]</span>
            <div id="sortable" class="sortable ui-sortable">
                <div class="guige_list ser1"><i>大数据服务</i></div>
                <div class="guige_list ser2"><i>传感器</i></div>
                <div class="guige_list ser3"><i>数据库</i></div>
                <div class="guige_list ser4"><i>防火墙</i></div>
                <div class="guige_list ser5"><i>大数据服务</i></div>
                <div class="guige_list ser6"><i>消息队列</i></div>
                <div class="guige_list ser7"><i>人工智能</i></div>
                <div class="guige_list ser8"><i>库存中心</i></div>
                <div class="guige_list ser9"><i>SLB负载均衡</i></div>
                <div class="guige_list ser10"><i>监控服务</i></div>
                <div class="guige_list ser11"><i>VPC网络</i></div>
                <div class="guige_list ser12"><i>身份网关</i></div>
                <div class="guige_list ser13"><i>APP应用</i></div>
                <div class="guige_list ser14"><i>Redis云数据库</i></div>
                <div class="guige_list"><i>空模块</i></div>
                <div class="guige_list ser15" style="width: 230px;height: 160px;"><i>Web集群</i></div>
            </div>
        </div>

        <div class="div1 divCopy" style="cursor: move;">
            <span style="font-size: 16px">主机区域</span>
            
        </div>
    </div>

    <div class="_right">
      <div style="width: 75%;float: right;height: 100%;border: 2px dashed #ccc" class="box" id="box" draggable ="false">

      </div>
    </div>
<div id="dialog" title="修改/删除主机区域">
    <label id="areaName">区域名称:</label><input type="text" name="areaName" value="主机区域"><br>
    <label id="width">区域宽度:</label><input type="text" name="width" value="230">(默认230)<br>
    <label id="height">区域高度:</label><input type="text" name="height" value="250">(默认250)<br>
    <label id="showBorder">区域边框是否显示:</label>
    <select name="showBorder">
    <option value="0" selected>是</option>
    <option value="1">否</option>
    </select>
</div>
<div id="dialog1" title="修改组件名称">
    <label id="passName">组件名称:</label><input type="text" name="passName"><br>
    </select>
</div>
<script>
     var dropHtml = '<div style="width: 100%;height: 90%" class="innerBox"></div>';  
     var dropElement = new Object();    
     var passElement = new Object();    

     $(function() {
        $("._right").css("height",$("._left").height()+50);
        $( "#downButton").button().click(function( event ) {
            event.preventDefault();
            html2canvas($('#box'), {
                allowTaint: false,
                onrendered: function (canvas) {   
                    downLoad(canvas);
                }
            })

        });
    })
    $().ready(function(e) { 
        $( "#dialog" ).dialog({ 
              autoOpen: false,
              buttons: [
                {
                  text: "删除",
                  click: function() {
                    $(dropElement).remove();
                    $( this ).dialog( "close" );
                  }
                },
                {
                  text: "修改",
                  click: function() {
                    var name = $("input[name='areaName']").val();
                    $(dropElement).find("span:first").html(name);
                    var x = $("input[name='width']").val();
                    var y = $("input[name='height']").val();
                    console.log("x:"+x+",y:"+y);
                    var s = $("select[name='showBorder']").val();
                    var xx = !isNaN(x)?x:230;
                    var yy = !isNaN(y)?y:250;
                    var b = s==0?"2px dashed green":"none";
                    $(dropElement).css({
                        "width":xx+"px",
                        "height":yy+"px",
                        "border":b  
                    })
                    //重新设置页面高度
                    setHeight(dropElement);
                    $( this ).dialog( "close" );
                  }
                },
                {
                  text: "取消",
                  click: function() {
                    $( this ).dialog( "close" );
                  }
                }
              ]
            });

        $( "#dialog1" ).dialog({ 
              autoOpen: false,
              buttons: [
                {
                  text: "修改",
                  click: function() {
                    var name = $("input[name='passName']").val();
                    $(passElement).parent().parent().find("i:first").html(name);
                    $( this ).dialog( "close" );
                  }
                },
                {
                  text: "取消",
                  click: function() {
                    $( this ).dialog( "close" );
                  }
                }
              ]
            });

        $( ".guige_list" ).draggable({
             helper:"clone",
             cursor: "move"
        });

        $( "#droppable" ).droppable({
           drop: function( event, ui ) {
                //console.log($(ui.draggable).html());
                var source = $(ui.draggable).clone();
                $(this).append(source);
            },
            out: function( event, ui ) {
                 console.log("1");
                 //$(ui.draggable).droppable( "destroy" );
              },
            activate: function( event, ui ) {
                 console.log("2");
              }
        });
    })

    //绑定主机区域drop事件
    function droppableFun(){
        //释放后
       $('div[class^="innerBox"]').droppable({
            drop:function(event,ui){
                //$(this).children().remove();
                var source = ui.draggable.clone();
                var op = '<div>';
                    op +='<span style="color: red;" onclick="javascript: $(this).parent().parent().remove();">删除</span>';
                    op +='<span style="color: blue;float: right;" onclick="javascript: update(this);">修改</span>';
                    op += '</div>';
                
                $(op, {
                    style:'display:none',
                }).appendTo(source);

                //样式修改
                source.css({
                  'border':'none',
                  'box-shadow':'none'
                });

                source.mouseenter(function () {
                    $(this).find("div").show();
                });

                source.mouseleave(function () {
                    $(this).find("div").hide();
                });

                $(this).append(source);

            }
        });
    }

     //修改组件名称
    function update(ob){
        var v = $(ob).parent().parent().find("i:first").html();
        $("input[name='passName']").val(v);
       $( "#dialog1" ).dialog( "open" );
       passElement = $(ob);
    }

     //动态设置页面高度
    function setHeight(ob){
        var bh = $("body").height();
        console.log("bh:"+bh);
        console.log("oh1:"+$(ob).height());
        console.log("oh2:"+$(ob).position().top);
        var oh = $(ob).height()+$(ob).position().top;
        console.log("oh:"+oh);
        if(oh>bh){
          $("body").css("height",oh+50);//预留50
        }
        
    }

    var oldPageX, oldPageY, cloneHtml, dragging;
    var oldLeft = $("#sortable").width();
    //1.鼠标按下时复制目标元素
    $(document).on("mousedown",".div1",function(event){
        dragging = true;
        if (dragging) {
            var _this = $(event.currentTarget);
            oldPageX = event.pageX;
            oldPageY = event.pageY;
            cloneHtml = $(_this).clone();
            oldoffset = $(_this).offset();
            $(document.body).append(cloneHtml)
            /*cloneHtml.css({
                position: 'fixed',
                left: oldoffset.left,
                top: oldoffset.top +10
            });*/
            cloneHtml.dblclick(function(){
                $( "#dialog" ).dialog( "open" );
                /*var person=prompt("请输入你的名字","Harry Potter");
                if (person!=null && person!=""){
                    $(this).find("span:first").html(x);
                }*/
                dropElement = $(this);
            });
 
        }
    })
    
    $(document).on({
        //2.寻找位置做判断处理
        'mousemove':function(event){
            if(dragging){
                var currPageX = event.pageX;
                var currPageY = event.pageY;
                var movePageX = currPageX - oldPageX;
                var movePageY = currPageY - oldPageY;
                console.log("movePageX:"+movePageX);
                console.log("movePageY:"+movePageY);
                console.log("oldoffset.left:"+oldoffset.left);
                console.log("oldoffset.top:"+oldoffset.top);
                cloneHtml.css({
                    opacity: '0.8',
                    //position: 'fixed',relative
                    position: 'absolute',
                    left: oldoffset.left + movePageX,
                    top: oldoffset.top + movePageY,
                    'z-index': 5
                });
                var targetBox = $("#box");
                var targetBoxOffset = targetBox.offset();
                if(movePageX >= oldLeft){
                    targetBox.css("border","2px dashed blue");//可拖放
                }else{
                    targetBox.css("border","2px dashed #ccc");
                }
            }
        },
       
       
    })
     //3.释放鼠标将目标元素放置
    $(document).on("mouseup",".div1",function(event){
            var currPageX = event.pageX;
            var currPageY = event.pageY;
            var targetBox = $("#box");
            var targetBoxOffset = targetBox.offset();
            /*if(!(currPageX > targetBoxOffset.left && currPageX <targetBoxOffset.left +300 && currPageY > targetBoxOffset.top && currPageY <targetBoxOffset.top +300)){
               cloneHtml.remove();
               dragging = false;
               return;
            };*/
            var movePageX = currPageX - oldPageX;
            var movePageY = event.pageY - oldPageY;
            //不过界移除
            if(movePageX < oldLeft){
               cloneHtml.remove();
               dragging = false;
               return;
            };
           cloneHtml.css({
               left: movePageX - oldLeft - 5,
               top: movePageY - 14
            });
           console.log($(".box").find(".divCopy").length);
           targetBox.append(cloneHtml);
           $(event.target).removeClass("div1");
           //$(event.target).css("position","static");
           $(event.target).addClass("divCopyStyle");
           targetBox.css("border","2px dashed #ccc");
           $(event.target).removeAttr("onmousedown");
           $(event.target).append(dropHtml);
           droppableFun();//绑定droppable
           dragging = false;       
    })


    /**
     * @author zw
     * @param {String} url 需要下载的文件地址
     * */
    function downLoad(canvas){
        $("canvas").remove();
        document.body.appendChild(canvas);
        //本地无法toDataURL,存在跨域问题-污染
        /*var oA = document.createElement("a");
        oA.download = '物理绘制图';// 设置下载的文件名，默认是'下载'
        oA.href = canvas.toDataURL();
        document.body.appendChild(oA);
        oA.click();
        oA.remove(); */// 下载之后把创建的元素删除 '?v='+ Math.random()
    }
</script>

</body>
</html>